<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图书管理</title>
  <style>
    td {
      border: 1px dotted orange;
    }
  </style>
</head>
<body>

<div id="app" style="width: 600px; margin: 0 auto; text-align: center">
  <h2>图书管理</h2>
  <div style="background-color: #f3dcab; margin-bottom: 2px">
    <label for="serial">编号：
      <input v-focus type="text" id="serial" v-model.number="form.id" :disabled="isActive">
    </label>
    <label for="name">名称：
      <input type="text" id="name" v-model.lazy.trim="form.name" @keyup.enter="submit">
    </label>
    <button @click="submit" :disabled="isSubmit">提交</button>
  </div>
  <div style="height: 30px; line-height: 30px; background-color: #f3dcab; border-top: 1px solid #C2D89A">
    <span>图书总数：{{total}}</span>
  </div>
  <div>
    <table style="width: 600px;">
      <thead style="background-color: #f3dcab">
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tr :key="item.id" v-for="item in books">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date | format}}</td>
        <td>
          <a href="#" @click.prevent="toUpdate(item.id)">修改</a>
          <a href="#" @click.prevent="remove(item.id)">删除</a>
        </td>
      </tr>
    </table>
  </div>
</div>

<script src="../lib/vue.js"></script>
<script>
  Vue.filter('format', function (mills) {
    let dt = new Date(mills);
    let year = dt.getFullYear();
    let month = dt.getMonth() + 1;
    let date = dt.getDate();
    let hour = dt.getHours();
    let minute = dt.getMinutes();
    let second = dt.getSeconds();

    return year + '-' + month + '-' + date + ' ' + hour
      + ':' + minute + ':' + second
  })

  Vue.directive('focus', {
    inserted(el) {
      el.focus();
    }
  })

  let vm = new Vue({
    el: '#app',
    data: {
      isActive: false,
      isSubmit: false,
      form: {
        id: '',
        name: ''
      },
      books: []
    },
    methods: {
      submit() {
        // 修改
        if (this.isActive) {
          this.update()
        } else {
          this.add();
        }
        this.form = {}
      },
      add() {
        let obj = {
          id: this.form.id,
          name: this.form.name,
          date: new Date().getTime()
        }
        this.books.push(obj)
      },
      toUpdate(idx) {
        this.isActive = true;
        let book = this.books.filter(item => {
          return item.id === idx
        })
        this.form.id = book[0].id;
        this.form.name = book[0].name;
      },
      update() {
        this.books.some(item => {
          if (item.id === this.form.id) {
            item.name = this.form.name;
            return true;
          }
        })
        this.isActive = false;
      },
      remove(id) {
        // let index = this.books.findIndex(item => {
        //   return item.id = id;
        // })
        // this.books.splice(index, 1);

        //方法二
        this.books = this.books.filter(item => {
          return item.id !== id;
        })
      }
    },
    computed: {
      total() {
        return this.books.length;
      }
    },
    watch: {
      'form.id'(val) {
        let flag = this.books.some(item => {
          return item.id === val;
        });
        // !的优先级高于&&
        if (!this.isActive && flag) {
          this.isSubmit = flag
        }
      }
    },
    mounted() {
      this.books = [
        {
          id: 1,
          name: '红楼梦',
          date: 2525609975000
        },
        {
          id: 2,
          name: '西游记',
          date: 2525609975000
        },
        {
          id: 3,
          name: '水浒传',
          date: 2525609975000
        },
        {
          id: 4,
          name: '三国演义',
          date: 2525609975000
        }
      ];
    }
  })
</script>
</body>
</html>